<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Mock</title>
    <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../node_modules/codemirror/lib/codemirror.css" rel="stylesheet">
    <link href="../node_modules/codemirror/theme/neat.css" rel="stylesheet">
    <link href="assets/mock.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="http://mockjs.com">Mock.js</a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="./mock.html">Data</a></li>
                <li class=""><a href="./mock4tpl.html">Handlebars &amp; Mustache</a></li>
                <li class=""><a href="./mock4xtpl.html">KISS XTemplate</a></li>
                <li class=""><a href="https://github.com/nuysoft/Mock">Github</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a id="save" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-ok-sign"></i> Save</a></li>
                <li><a id="beautifier" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-eye-open"></i> Beautifier</a></li>
                <li><a id="share" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-share-alt"></i> Share</a></li>
                <li><a id="account" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-user"></i> Login/Sign up</a></li>
            </ul>
        </div>
    </nav>

    <div class="sidebar"></div>
    <div class="content clearfix">
        <div class="window float-left">
            <textarea id="editor">
{
    "origArray": [
        {
            "foo": "foo"
        },
        {
            "bar": "bar"
        },
        {
            "foobar": "foobar"
        }
    ],
    "origArrayWithHolder": [
        {
            "foo|+1": "1"
        },
        {
            "bar": "@EMAIL"
        },
        {
            "foobar": "foobar"
        }
    ],
    "data|1-10": [
        {
            "id|+1": 1,
            "grade1|1-100": 1,
            "grade2|90-100": 1,
            "float1|.1-10": 10,
            "float2|1-100.1-10": 1,
            "float3|999.1-10": 1,
            "float4|.3-10": 123.123,
            "star|1-5": "★",
            "cn|1-5": "汉字",
            "repeat|10": "A",
            "published|1": false,
            "email": "@EMAIL",
            "date": "@DATE",
            "time": "@TIME",
            "datetime": "@DATETIME",
            "method|1": [
                "GET",
                "POST",
                "HEAD",
                "DELETE"
            ],
            "size": "@AD_SIZE",
            "img1": "@IMG(200x200)",
            "img2": "@IMG",
            "img3": "@IMG(@size)",
            "img4": "@IMG(@AD_SIZE)",
            "dummyimage": {
                "size": "@AD_SIZE",
                "background": "@COLOR",
                "foreground": "@COLOR",
                "format|1": [
                    "png",
                    "gif",
                    "jpg"
                ],
                "text": "@WORD",
                "url": "http://dummyimage.com/@size/@background/@foreground.@format&text=@text"
            },
            "param": "abc=123",
            "url1": "@img3?@param",
            "url2": "@img4?@ID&id=@id",
            'dataImage':'@DATAIMAGE'
        }
    ]
}</textarea>
        </div>
        <div class="handler" id="handler_vertical" style="left: 50%;"></div>
        <div class="window float-right">
            <textarea id="result"></textarea>
        </div>
    </div>

    <script src="../node_modules/jquery/tmp/jquery.js"></script>
    <script src="assets/bootstrap/js/bootstrap.js"></script>
    <script src="../node_modules/codemirror/lib/codemirror.js"></script>
    <script src="../node_modules/codemirror/mode/javascript/javascript.js"></script>
    <script src="../dist/mock.js"></script>

    <script type="text/javascript">
        var mode = 'javascript';
    </script>
    <script src="./assets/editor.js"></script>
    <script type="text/javascript">
        $(function(){
            function handle(instance, changeObj) {
                var tpl;
                try {
                    tpl = instance.getValue()
                    tpl = tpl.replace(/^([\r\n]*)/i, '')
                        .replace(/([\r\n]*$)/i, '')
                    if (/^\s*[\[\{\(]/.test(tpl)) {
                        tpl = new Function('return ' + instance.getValue());
                        tpl = tpl()
                    }
                } catch (error) {
                    console.error(error.stack);
                    tpl = error.toString()
                }
                var data = Mock.mock(tpl)
                data = JSON.stringify(data, null, 4)
                result.setValue(data);
                return handle
            }

            editor.on('change', handle(editor));

            $('#save').on('click', function(event) {
                $.ajax({
                    url: 'http://localhost:3000/save',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        tpl: editor.getValue()
                    }
                })
            })
        });
    </script>
    
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-27059428-2', 'mockjs.com');
      ga('send', 'pageview');
    </script>
</body>
</html>
